<template>
  <article class="event-query">
    <el-button text :bg="canDraw" :type="canDraw ? 'primary' : ''" @click="handleQuery">
      事件查询
    </el-button>
    <EventQueryDialog
      v-model:showDialog="showDialog"
      v-model:showHeatMap="showHeatMap"
      :map
      :queryResultSource
    />
    <SelectEventFeature :queryResultLayer :map v-model="canSelect" />
  </article>
</template>

<script setup>
import { ref, watch, provide } from 'vue'
import locationIcon from '@/assets/icons/location.svg'
import EventQueryDialog from './EventQueryDialog.vue'
import SelectEventFeature from './SelectEventFeature.vue'
import { ElMessageBox } from 'element-plus'

const { map } = defineProps({
  map: {
    type: Object,
    required: true,
  },
})

const canDraw = ref(false)
const queryResultData = ref([])
const showDialog = ref(false)
const showHeatMap = ref(false)
const canSelect = ref(false)

// 初始化绘制层
const drawLayer = new ol.layer.Vector({})
const drawSource = new ol.source.Vector()
drawLayer.setSource(drawSource)
map.addLayer(drawLayer)
// 初始化查询结果图层
const queryResultLayer = new ol.layer.Vector({})
const queryResultSource = new ol.source.Vector({ wrapX: false })
queryResultLayer.setSource(queryResultSource)
map.addLayer(queryResultLayer)
// 绘制交互
const drawer = new ol.interaction.Draw({
  source: drawSource,
  type: 'Circle',
})
map.addInteraction(drawer)
drawer.set('active', false) //初始不激活
// 绘制结束事件
drawer.on('drawend', (e) => {
  drawer.set('active', false) // 关闭绘制
  const { feature } = e
  const olGeom = feature.getGeometry()
  // 开始查询geom范围内的事件
  queryEvent(olGeom)
})

// 封装查询功能
const queryEvent = (olGeom) => {
  // 调用封装的函数清除查询结果图层
  clearA()

  // 设置查询形状
  const queryGeom = new Zondy.Object.Circle()
  queryGeom.setByOL(olGeom)

  // 设置查询规则
  const queryRule = new Zondy.Service.QueryFeatureRule({
    Intersect: true, //是否相交
  })

  // 设置查询结构
  const queryStruct = new Zondy.Service.QueryFeatureStruct({
    IncludeGeometry: true, //是否包含几何图形信息
  })

  // 查询参数信息对象
  const queryParam = new Zondy.Service.QueryByLayerParameter(
    'gdbp://MapGisLocal/wuhan/sfcls/事件',
    {
      geometry: queryGeom, //查询几何图形
      rule: queryRule, //几何查询规则
      struct: queryStruct,
      recordNumber: 10000, //查询记录数
    },
  )
  // 实例化矢量图层查询服务对象
  const queryService = new Zondy.Service.QueryLayerFeature(queryParam, {
    ip: '127.0.0.1',
    port: '8089',
  })

  // 执行查询服务对象的查询方法,参数为两个回调函数,成功和失败
  queryService.query(querySuccess, queryError)
}
// 查询成功回调函数
const querySuccess = (result) => {
  // 初始化Zondy.Format.PolygonJSON类
  const format = new Zondy.Format.PolygonJSON()
  // 将MapGIS要素JSON反序列化为ol.Feature类型数组
  const features = format.read(result)
  if (!features) {
    // 当没有查询到结果时, 提示用户并退出函数
    ElMessageBox.alert('查询结果为空')
    return
  }
  // 将features添加到查询结果图层
  queryResultSource.addFeatures(features)
  // 样式
  const style = new ol.style.Style({
    image: new ol.style.Icon({
      src: locationIcon,
      anchor: [0.5, 1],
      scale: 0.2,
    }),
  })
  queryResultLayer.setStyle(style)
  // 获得查询结果事件信息传递到Dialog组件
  features.forEach((feature) => {
    const {
      事件编号: number,
      事件类型: type,
      事件等级: grade,
      发生时间: date,
      发生地点: position,
      车牌号: carnumber,
      驾驶员: person,
      处理状态: status,
    } = feature.getProperties().getProperties()
    queryResultData.value.push({
      number,
      type,
      grade,
      date,
      position,
      carnumber,
      person,
      status,
    })
  })
  showDialog.value = true // 打开查询结果弹窗
  canSelect.value = true // 打开选中事件功能
}
// 查询失败回调函数
const queryError = (error) => {
  console.log(error)
}
// 清除查询结果图层
const clearA = () => {
  queryResultSource.clear() // 清除查询结果图层
  queryResultData.value = [] // 清空查询结果数据
  showHeatMap.value = false // 关闭热力图
  canSelect.value = false // 关闭选中事件
}

const handleQuery = () => {
  canDraw.value = !canDraw.value //切换绘制状态
  clearA() // 清除查询结果图层
}
watch(canDraw, () => {
  drawSource.clear() // 清除绘制层
  if (canDraw.value) {
    // 激活绘制
    drawer.set('active', true)
  } else {
    // 关闭绘制
    drawer.set('active', false)
  }
})

provide('queryResultData', queryResultData)
</script>

<style lang="scss" scoped></style>
